<template>
	<el-dialog :title="dialogTitle" :visible.sync="visible" top="0" width="720px" append-to-body>
		<el-descriptions v-bind="descriptionsConfig" v-loading="loading">
			<el-descriptions-item label="试题题库">{{ questionBank.name }}</el-descriptions-item>
			<el-descriptions-item label="试题难度">
				<el-tag type="danger" size="small">{{ subjectData.difficulty | difficultyFilter }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="试题类型">
				<el-tag size="small">{{ subjectData.type | subjectTypeFilter }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="试题状态">
				<el-tag type="success" size="small">{{ subjectData.status | subjectStatusFilter }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="试题标签" :span="2">{{ subjectData.tags }}</el-descriptions-item>
			<el-descriptions-item label="试题题干" :span="2"><div class="title" v-html="questionTitle"></div></el-descriptions-item>
			<el-descriptions-item label="试题选项" :span="2" content-class-name="answer" v-if="questionOptions.length > 0">
				<dl v-for="(item, index) in questionOptions" :key="index">
					<dt>选项{{ item.tag }}</dt>
					<dd v-html="item.contents"></dd>
				</dl>
			</el-descriptions-item>
			<el-descriptions-item label="试题答案" :span="2" content-class-name="answer">
				<template v-if="subjectData.type === '4'">
					<dl v-for="(item, index) in questionAnswer" :key="index">
						<dt>空格{{ item.key }}</dt>
						<dd>{{ item.value }}</dd>
					</dl>
				</template>
				<template v-else>{{ questionAnswer }}</template>
			</el-descriptions-item>
			<el-descriptions-item label="答案解析" :span="2"><div v-html="subjectData.subAnalysis"></div></el-descriptions-item>
		</el-descriptions>
	</el-dialog>
</template>

<script>
import { queryQuestions } from '@/api/exam/testSubjects';
import { subjectType, subjectDifficulty } from '@/utils/subjectData';
export default {
	props: {
		value: { type: Boolean, default: false },
		dataId: { type: String, default: '' }
	},
	data() {
		return {
			loading: false,
			visible: this.value,
			subjectData: {},
			descriptionsConfig: {
				column: 2,
				border: true,
				size: 'medium',
				class: 'subject_descriptions',
				labelStyle: { width: '90px' }
			}
		};
	},
	computed: {
		dialogTitle() {
			return '试题详情';
		},
		questionBank() {
			return this.subjectData.testQuestionBank || {};
		},
		questionAnswer() {
			let subAnswer = this.subjectData.subAnswer;
			if (this.subjectData.type === '4') {
				return !!subAnswer && subAnswer.isJSON() ? JSON.parse(subAnswer) : [];
			} else if (this.subjectData.type === '2') {
				let answer = !!subAnswer && subAnswer.isJSON() ? JSON.parse(subAnswer) : [];
				return answer.sort().join();
			} else if (this.subjectData.type === '3') {
				if (subAnswer === '1') {
					return '正确';
				} else if (subAnswer === '2') {
					return '错误';
				}
			} else {
				return subAnswer;
			}
		},
		questionOptions() {
			let options = this.subjectData.subjectOptionsVOList;
			if (['1', '2'].some((n) => n === this.subjectData.type)) {
				return options || [];
			} else {
				return [];
			}
		},
		questionTitle() {
			let regExp = /\[LOCK\](.*?)\[\/LOCK\]/g;
			let title = this.subjectData.title || '';
			return title.replace(regExp, '（$1）');
		}
	},
	filters: {
		difficultyFilter(input) {
			let info = subjectDifficulty.find((n) => n.value === input);
			return !info ? '' : info.label;
		},
		subjectTypeFilter(input) {
			let info = subjectType.find((n) => n.value === input);
			return !info ? '' : info.label;
		},
		subjectStatusFilter(input) {
			if (input === '1') {
				return '正常';
			} else if (input === '2') {
				return '禁用';
			}
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.loading = true;
			this.getQuestionsDetail();
		}
	},
	methods: {
		//获取试题详情
		async getQuestionsDetail() {
			let result = await queryQuestions(this.dataId).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.subjectData = this.$detailData(result.data);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.subject_descriptions::v-deep {
	flex: 1;
	font-size: 15px;
	overflow: hidden;
	.el-descriptions-item__content.answer {
		&:has(dl) {
			padding: 0;
		}
	}
	dl {
		display: flex;
		border-bottom: solid 1px #ebeef5;
		&:last-child {
			border-bottom: none;
		}
	}
	dt {
		width: 60px;
		padding: 10px;
		background-color: #f5f7fa;
		border-right: solid 1px #ebeef5;
	}
	dd {
		padding: 10px;
	}
}
</style>
